<script setup lang="ts">
import { ref } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores'
//
const time = ref(5)

const timer = () => {
  let countdown = setInterval(() => {
    time.value -= 1
    if (time.value === 1) {
      // 检查用户是否已经登录
      const memberstore = useMemberStore()
      const token = memberstore.profile?.token
      if (token) {
        // 用户已经登录，跳转首页
        uni.switchTab({ url: '/pages/index/index' })
      } else {
        // 用户未登录，跳转到登录页
        uni.redirectTo({ url: '/pages/login/login' })
      }
      clearInterval(countdown)
    }
  }, 1000)
}

const goToLogin = () => {
  // 检查用户是否已经登录
  const memberstore = useMemberStore()
  const token = memberstore.profile?.token
  if (token) {
    // 用户已经登录，跳转首页
    uni.switchTab({ url: '/pages/index/index' })
  } else {
    // 用户未登录，跳转到登录页
    uni.redirectTo({ url: '/pages/login/login' })
  }
}

onShow(() => {
  timer()
})
</script>

<template>
  <view class="steer-container">
    <image class="background" src="@/static/steer/steer.png" mode="aspectFill"></image>
    <view class="go_login">
      <image class="animated-image" src="@/static/steer/goLogin.png" mode="scaleToFill" />
    </view>
    <p class="set-time">{{ time }}</p>
    <p class="steer-text" @click="goToLogin">打开爱情之路</p>
  </view>
</template>

<style scoped lang="scss">
//
.steer-container {
  height: 100%;
  .background {
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100% 100%;
    z-index: -1;
  }
  .go_login {
    width: 50%;
    height: 11%;
    left: 180rpx;
    position: fixed;
    bottom: 10vh;
  }
  .steer-text {
    color: rgb(240, 148, 172);
    position: fixed;
    bottom: 13vh;
    left: 270rpx;
    font-family: 'Gill Sans';
    animation: pulse 2s infinite;
  }
  .set-time {
    color: rgb(240, 148, 172);
    position: fixed;
    bottom: 16vh;
    left: 400rpx;
    font-family: 'Gill Sans';
    animation: pulse 2s infinite;
  }
  .animated-image {
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
}
</style>
